<template>
<!-- name="slide-right" -->
  <transition appear
              name="el-zoom-in-center"
              v-on:after-enter="afterEnter"
              v-on:before-leave="beforeLeave"
  >
    <div v-if="show" class="RightSidePanel theme-pannel" :class="{autoHeight}" :style="rootStyle">
      <div class="theme-pannel__title">
        <slot name="title">
          <span>{{title}}</span>
        </slot>
        <i class="close-btn el-icon-close theme-bg-primary" @click="closePanel"></i>
      </div>
      <div class="panel-content" :class="{showFooter}">
        <slot></slot>
      </div>
      <slot name="footer">
        <div v-if="showFooter" class="footer-div">
          <DataButton text="确定" type="primary" @click="handleClickOk"></DataButton>
          <DataButton text="取消" @click="closePanel"></DataButton>
        </div>
      </slot>
    </div>
  </transition>
</template>

<script>
  const rightPanels = [];
  let maskDiv = null;

  //获取下一个panel的z-index
  function currZIndex() {
    if (rightPanels.length <= 0) return 100;
    let maxZindex = 100;
    rightPanels.forEach((p) => {
      maxZindex = Math.max(p.zIndex, maxZindex);
    });
    return maxZindex;
  }

  function showMask() {
    //查找所有当前正在显示的侧边
    let list = rightPanels.filter((p) => p.show && p.showMask && p.$el);
    if (!list || !list.length) {
      return;
    }
    let maxZindex = 0;
    list.forEach((p) => {
      maxZindex = Math.max(p.zIndex, maxZindex);
    });
    if (null == maskDiv) {
      maskDiv = document.createElement("div");
      maskDiv.classList.add("global-mask");
      document.body.appendChild(maskDiv);
      maskDiv.addEventListener("click", function () {
        //查找 最开头的那个显示的那个
        let rs = rightPanels.filter((p) => p.show).sort((a, b) => b.zIndex - a.zIndex);
        if (rs && rs[0] && rs[0].maskClose) {
          rs[0].closePanel();
        }
      })
    } else {
      maskDiv.style.display = "block";
    }
    maskDiv.style.zIndex = maxZindex - 1;
  }

  function panelPush(instance) {
    rightPanels.push(instance);
  }

  function panelRemove(instance) {
    let index = rightPanels.indexOf(instance);
    if (index > -1) {
      rightPanels.splice(index, 1);
    }
    hideMask();
  }

  function hideMask() {
    if (!maskDiv) return;
    //判断是否需要有panel
    //查找所有当前正在显示的侧边
    let list = rightPanels.filter((p) => p.show && p.showMask && p.$el);
    let showPanel = list && list.length;
    if (!showPanel) {
      maskDiv.style.display = "none";
    } else {
      let maxZindex = 0;
      list.forEach((p) => {
        maxZindex = Math.max(p.zIndex, maxZindex);
      });
      //需要显示，调整mask的索引
      maskDiv.style.zIndex = maxZindex - 1;
    }
  }

  window.addEventListener("keyup", function (e) {
    if (e.keyCode !== 27) return;
    if (rightPanels.length <= 0) {
      return;
    }
    //查找 最开头的那个显示的那个
    let rs = rightPanels.filter((p) => p.show).sort((a, b) => b.zIndex - a.zIndex);
    if (rs && rs[0] && rs[0].escClose) {
      rs[0].closePanel();
    }
  });
  //右侧弹出的面板
  export default {
    name: "RightSidePanel",
    props: {
      show: {
        default: false
      },
      autoHeight: {
        default: true
      },
      showMask: {
        default: true
      },
      escClose: {
        default: true
      },
      maskClose: {
        default: true
      },
      title: {
        default: '标题'
      },
      width: {
        default: '200px'
      },
      showFooter: {
        default: true //是否显示底部的按钮
      },
      onCloseFn: {}
    },
    data() {
      return {
        zIndex: currZIndex() + 2,
        viewIsPrepared: false,//已经完全展示出来后为ok
      };
    },
    created() {
      panelPush(this);
    },
    mounted() {
      if (this.show && this.showMask) {
        showMask();
      }
      document.body.appendChild(this.$el);
    },
    watch: {
      show() {
        if (this.show && this.showMask) {
          showMask();
        } else if (!this.show) {
          hideMask();
        }
      },
    },
    computed: {
      rootStyle() {
        let rs = {
          width: this.width,
          zIndex: this.zIndex,
        };
        // if (!this.showFooter) {
        //   rs.paddingBottom = '10px';
        // }
        return rs;
      },
    },
    methods: {
      closePanel() {
        this.$emit("close", false);
        this.$emit("update:show", false);
        this.onCloseFn && this.onCloseFn(false);
      },
      handleClickOk() {
        this.onCloseFn && this.onCloseFn(true);
        this.$emit("close", true);
      },
      beforeLeave() {
        this.viewIsPrepared = false;
      },
      afterEnter() {
        this.viewIsPrepared = true;
        this.$emit("afterEnter");
      },
      //检测是否完全显示，否则监听直到下次展示。
      onNextEntered(cb) {
        if (this.viewIsPrepared) {
          cb();
        } else {
          this.$on("afterEnter", cb);
        }
      }
    },
    beforeDestroy() {
      panelRemove(this);
      document.body.removeChild(this.$el);
    }
  }
</script>

<style lang="scss" scoped>
  .RightSidePanel {
    width: 800px!important;
    height: calc(100% - 60px);
    position: fixed;
    right: calc((100vw - 800px)/2);
    top: 60px;
    z-index: 99;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    animation-duration: 0.5s !important;
  }

  .theme-pannel__title {
    line-height: 36px;
    padding: 0 10px;
  }

  .RightSidePanel.autoHeight {
    height: auto;
    max-height: calc(100% - 60px);

    .panel-content {
      position: relative;
      left: 0;
      top: 0;
      right: auto;
      bottom: auto;
      min-height: 100px;
      max-height: calc(100vh - 100px);
    }

    .footer-div {
      position: relative;
      bottom: auto;
      padding-bottom: 10px;
    }
  }

  .panel-content {
    position: absolute;
    left: 0px;
    right: 0px;
    padding: 10px 10px 10px 10px;
    bottom: 0;
    top: 37px;
    overflow: auto;
  }

  .RightSidePanel .panel-content.showFooter {
    max-height: calc(100vh - 140px);
  }

  .footer-div {
    position: absolute;
    width: 100%;
    text-align: right;
    left: 0;
    bottom: 10px;
    padding-top: 4px;
    padding-right: 6px;
  }

  .close-btn {
    border-radius: 50%;
    color: white;
    width: 16px;
    height: 16px;
    font-size:13px;
    text-align: center;
    padding-top: 2px;
    cursor: pointer;
    float: right;
    margin-top: 10px;
  }

  @media screen and (max-width: 1400px) {
    .RightSidePanel {
    }
    .RightSidePanel.autoHeight {

    }
  }
</style>
